<template>
  <div class="line">
    <span class="ltxt" style="font-size: 14px;font-weight: 700;color:#606266">筛选客户：</span>
    <div class="gt">
      <div id="choose">
        <div id="editForm" class="form">
          <div class="choose-box">
            <template v-for="(a, b) in endData" :key="b">
              <ul class="litem">
                <li v-for="(c, d) in a.data" :key="d">
                  <div class="groups" v-if="c.type == 1">
                    <div class="close-icon" @click="removeItem(b, d)"></div>
                    <div class="words">做过</div>
                    <div class="sele-inp">
                      <el-select class="sele" v-model="c.term">
                        <!-- 事件 DZData-->
                        <el-option v-for="(item, i) in DZData" :value="item.id" :key="i" :label="item.text"
                          :disabled="selectArrs.arr1.includes(item.id) ? 'disabled' : false">
                        </el-option>
                      </el-select>
                    </div>
                    <template v-if="c.term">
                      <div class="sele-inp">
                        <el-select class="sele" v-model="c.rather">
                          <!-- 条件 TJData-->
                          <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text">
                          </el-option>
                        </el-select>
                      </div>

                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次&nbsp;<em class="tan-icon" title="事件操作过的次数">!</em>
                      </span>
                      且&nbsp;&nbsp;
                      <div class="sele-inp">
                        <el-select class="sele !w-[60px]" v-model="c.rather2">
                          <!-- 条件 TJData-->
                          <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text">
                          </el-option>
                        </el-select>
                      </div>

                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次&nbsp;<em class="tan-icon" title="事件操作过的次数">!</em>
                      </span>
                    </template>
                  </div>
                  <div class="groups" v-else-if="c.type == 2">
                    <div class="close-icon" @click="removeItem(b, d)"></div>
                    <div class="words">新增于</div>

                    <div class="sele-inp">
                      <el-select class="sele" v-model="c.term">
                        <!-- <option value="">请选择</option> -->
                        <el-option value="1" selected>最近</el-option>
                      </el-select>
                    </div>
                    <template v-if="c.term">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" @input="changeNum($event, b, d, 'times', 2, 180)"
                          @blur="clearNoNum(this)" v-model="c.times" />
                      </div>
                      <span style="margin-right: 25px;">天
                      </span>
                    </template>
                  </div>
                  <div class="groups" v-else-if="c.type == 3">
                    <div class="close-icon" @click="removeItem(b, d)"></div>
                    <div class="words">活跃次数</div>
                    <div class="sele-inp">
                      <el-select class="sele" v-model="c.rather">
                        <!-- 条件 TJData-->
                        <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text"
                          :disabled="selectArrs.arr3.includes(item.id) ? 'disabled' : false">
                        </el-option>
                      </el-select>
                    </div>
                    <template v-if="c.rather">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次&nbsp;<em class="tan-icon" title="活跃次数等于进入APP次数">!</em></span>
                      且&nbsp;&nbsp;
                      <div class="sele-inp">
                        <el-select class="sele" v-model="c.rather2">
                          <!-- 条件 TJData-->
                          <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text"
                            :disabled="selectArrs.arr3.includes(item.id) ? 'disabled' : false">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次&nbsp;<em class="tan-icon" title="活跃次数等于进入APP次数">!</em></span>
                    </template>
                  </div>
                  <div class="groups" v-else-if="c.type == 4">
                    <div class="close-icon" @click="removeItem(b, d)"></div>
                    <div class="words">客户属性满足</div>
                    <div class="sele-inp">
                      <el-select class="sele" v-model="c.term" @change="selectFn($event, b, d)">
                        <el-option v-for="(item, i) in MZData" :value="item.id" :key="i" :label="item.text"
                          :disabled="selectArrs.arr4.includes(item.id) ? 'disabled' : false">
                        </el-option>
                      </el-select>
                    </div>
                    <template v-if="c.mType == 1">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 180)" @blur="clearNoNum(this)" />
                      </div>

                    </template>
                    <template v-if="c.mType == 2">
                      <!-- 大于、小于、等于 -->
                      <div class="sele-inp">
                        <el-select class="sele !w-[60px]" v-model="c.rather">
                          <!-- 条件 TJData-->
                          <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="sele-inp" v-if="c.term == 1 || c.term == 2">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 12">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 30)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 17">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 1, 100)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 10 || c.term == 15">
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 1, 1000)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else>
                        <input type="text" class="inp inp2" v-model="c.times"
                          @input="changeNum($event, b, d, 'times', 2, 120)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;" v-if="c.term == 1">次</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 2">小时</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 4">岁</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 10 || c.term == 15">万元</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 17">%</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 18">年</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 12">次</span>
                      <!-- 11111111111111111111111111111111-->
                      且&nbsp;&nbsp;
                      <div class="sele-inp">
                        <el-select class="sele !w-[60px]" v-model="c.rather2">
                          <!-- 条件 TJData-->
                          <el-option v-for="(item, i) in TJData" :value="item.id" :key="i" :label="item.text">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="sele-inp" v-if="c.term == 1 || c.term == 2">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 180)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 12">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 30)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 17">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 1, 100)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else-if="c.term == 10 || c.term == 15">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 1, 1000)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else>
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 120)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;" v-if="c.term == 1">次</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 2">小时</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 4">岁</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 10 || c.term == 15">万元</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 17">%</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 18">年</span>
                      <span style="margin-right: 25px;" v-else-if="c.term == 12">次</span>
                    </template>
                    <template v-if="c.mType == 3">
                      <!-- 包含、不包含 -->
                      <div class="sele-inp">
                        <el-select class="sele !w-[100px]" v-model="c.rather">
                          <!-- 条件 BHData-->
                          <el-option v-for="(item, i) in BHData" :value="item.id" :key="i" :label="item.text">
                          </el-option>
                        </el-select>
                      </div>

                      <div class="my-select">
                        <!-- <div class="sele-posi"> -->
                        <el-select placeholder="请选择" v-model="c.selectMore" multiple collapse-tags>
                          <el-option v-for="option  in  selData[c.mName] " :key="option.id" :label="option.text"
                            :value="option.text" />
                        </el-select>
                        <!-- <input type="text" class="inp" v-model="c.selectMore" :title="c.selectMore"
                            @click="selectShow($event, b, d)" readonly />
                          <select class="sele" multiple v-model="c.times" v-if="c.isSelect"
                            @change="selectFn2($event, b, d)"
                            :style="{ 'height': selData[c.mName].length > 5 ? '200px' : '110px' }">
                            <option value="" disabled="disabled">按住ctrl或shift进行多选
                            </option>
                            <option v-for="(item, i) in selData[c.mName]" :value="item.id" :key="i">
                              {{ item.text }}
                            </option>
                          </select>
                          <div class="sele-mask" v-if="c.isSelect" @click="c.isSelect = !c.isSelect"></div> -->
                        <!-- </div> -->

                      </div>
                      <span style="margin-right: 25px;"></span>
                    </template>

                  </div>
                  <div class="leb-groups">
                    <span v-if="d < 2">或者</span>
                    <div class="btn-list" v-if="d == a.data.length - 1 && a.data.length < 3">
                      <!-- 点击新增的按钮 CZData-->
                      <button v-for="(item, i) in CZData" @click="addItem(item.id, b, d)">{{ item.text }}</button>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="lebs">
                <span v-if="b < 7">并且</span>
                <div class="btn-list" v-if="b == endData.length - 1 && endData.length < 8">
                  <!-- 点击新增的按钮 CZData-->
                  <button v-for="(item, i) in CZData" @click="addItem(item.id, b)">{{ item.text }}</button>
                </div>
              </div>
            </template>
            <div class="lebs">
              <div class="btn-list" v-if="endData.length == 0">
                <!-- 点击新增的按钮 CZData-->
                <button v-for="(item, i) in CZData" @click="addItem(item.id, b)">{{ item.text }}</button>
              </div>
            </div>
          </div>
          <div class="choose-foot">
            <button type="button" class="btn-white" @click="clearChoose()">清空选择</button>
            <!-- <button type="button" class="btn-def" @click="setChoose()">确认创建</button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usescreen } from "./hooks"
const {
  MZData,
  TJData,
  BHData,
  CZData,
  selData,
  mType,
  endData,
  selectArrs,
  addItem,
  selectFn,
  selectFn2,
  selectShow,
  removeItem,
  setChoose,
  onCreate,
  clearChoose,
  clearNoNum,
  changeNum
} = usescreen()
</script>
<style scoped>
@import url(@/style/choose.css);
</style>
